<template>
  <div class="topUp_container pr-1 pl-1">
		<!-- 需要选货币时，展示货币列表 -->
		<van-radio-group v-model="radio" v-if="pageType === 'changeTogether' || pageType === 'changeCurrency'">
			<van-cell-group>
				<div v-for="(channelItem, channelIndex) in channelList" :key="channelItem.id" class="topUp_channel_container_card">
					<div class="topUp_container_title mb-1">
						{{ $t('Channel {num}',{num:channelIndex+1}) }}
					</div>
					<div v-for="(currencyItem) in channelItem.currencyList" :key="currencyItem.id" class="topUp_container_item">
						<van-cell clickable @click="clickCurrency(channelItem.id,currencyItem.id)">
							<template #right-icon>
								<van-radio :name="channelItem.id+'_'+currencyItem.id" />
							</template>
							<template #title>
								<img :src="getCoinIcon(currencyItem.name)" alt="">
								<span class="custom-title">{{ currencyItem.name }}</span>
							</template>
						</van-cell>
					</div>
				</div>
			</van-cell-group>
		</van-radio-group>

		<!-- 选货币后如果需要进一步选网络的弹窗 -->
		<van-popup
			v-model="popShow"
			closeable
			close-icon="close"
			position="bottom"
			:style="{ height: '70%' }"
		>
			<div class="padding-1">
				<div class="topUp_container_pop_title mb-2">{{ $t("选择网络") }}</div>
				<div class="topUp_container_pop_item mb-1 br-8" v-for="(item,index) in addressNetworkList" :key="index" @click="clickNetworkItem(item.id)">
					<div class="pop_item_title mb-0">{{ item.name }}</div>
					<div class="pop_item_content">{{ $t("最少充值 > {count}",{count:Number(item.min).toFixed(2)}) }}</div>
				</div>
			</div>
		</van-popup> 

		<!-- 如果只需要选网络时，展示网络列表 -->
		<div class="" v-if="pageType ==='changeNetwork'">
			<div class="topUp_container_pop_item mb-1 br-8" v-for="(item,index) in addressNetworkList" :key="index" @click="clickNetworkItem(item.id)">
				<div class="pop_item_title mb-0">{{ item.name }}</div>
				<div class="pop_item_content">{{ $t("最少充值 > {count}",{count:Number(item.min).toFixed(2)}) }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getRecharge } from "@/request/personalCenter"
import BusinessUtils from '@/utils/business'
export default {
	name : "TopUp",
	data(){
		return {
			radio:'',

			popShow:false,

			preSelectCurrencyName: '',

			preSelectChannel: '',
			preSelectCurrency: '',
			preSelectNetwork: '',

			/**
			 * 页面类型
			 * 'changeTogether'修改货币和网络 'changeCurrency'修改货币 'changeNetwork'修改网络 
			 */
			pageType: 'changeTogether',

			channelList: [],
			addressNetworkList: [],

			selectedChannel: '',
			selectedCurrency: '',
			selectedNetwork: '',
		}
	},
	mounted(){
		this.initPreSelect();
		this.getRecharge()
	},

	methods:{
		initPreSelect(){
			if(this.$route.params.currencyName){
				this.preSelectCurrencyName = this.$route.params.currencyName
			}

			if(this.$route.params.channel){
				this.preSelectChannel = this.$route.params.channel
			}

			if(this.$route.params.currency){
				this.preSelectCurrency = this.$route.params.currency
			}

			if(this.$route.params.network){
				this.preSelectNetwork = this.$route.params.network
			}

			if(this.$route.params.pageType){
				this.pageType = this.$route.params.pageType
			}
		},

		getRecharge(){
			getRecharge({}).then(res => {
				if(res.code == 1){
					let tempChannelList = []

					// 暂时后端没有通道，所以写死了只有一个id为1的通道
					let channelInfo = {}
					tempChannelList.push(channelInfo)
					channelInfo.id = 1

					channelInfo.currencyList = []
					for(let i = 0;i < res.data.icon_list.length;i++){
						let currencyData = res.data.icon_list[i]

						let currencyInfo = {}
						currencyInfo.id = currencyData.id
						currencyInfo.name = currencyData.name
						channelInfo.currencyList.push(currencyInfo)
					}

					for(let i = 0;i < res.data.recharge.length;i++){
						let networkData = res.data.recharge[i]

						let currencyInfo = channelInfo.currencyList.find(item => item.id == networkData.type)
						if(currencyInfo.networkList == undefined){
							currencyInfo.networkList = []
						}
						let networkInfo = {}
						networkInfo.id = networkData.id
						networkInfo.name = networkData.name
						networkInfo.currencyId = networkData.type
						networkInfo.min = networkData.min_total
						networkInfo.shortName = networkData.value

						currencyInfo.networkList.push(networkInfo)
					}

					this.channelList = tempChannelList;

					this.dipositPreSelect();
				}else{
					this.$toast.fail(res.msg)
				}
				
			})
		},

		dipositPreSelect(){
			// if(this.preSelectCurrency =='' && this.preSelect)


			//如果页面类型是修改网络，要选择外部选好的通道和货币
			if(this.pageType === 'changeNetwork'){
				this.selectCurrency(this.preSelectChannel, this.preSelectCurrency);
			}else if(this.pageType === 'changeCurrency' || this.pageType === 'changeTogether'){
				// 如果外部有选好的通道和货币，则使用外部选好的
				// 暂时后端没有通道，所以默认选择id为1的通道

				let channelInfo = this.channelList.find(item => item.id == this.preSelectChannel);
				if(channelInfo == null){
					channelInfo = this.channelList[0];
				}

				let preSelectCurrency = this.preSelectCurrency;
				if(preSelectCurrency == '' && this.preSelectCurrencyName != ''){
					for(let i = 0;i < this.channelList.length;i++){
						let tempChannelInfo = this.channelList[i];
						if(tempChannelInfo.currencyList && tempChannelInfo.currencyList.length > 0){
							let currencyInfo = tempChannelInfo.currencyList.find(item => item.name == this.preSelectCurrencyName);
							if(currencyInfo){
								channelInfo = tempChannelInfo;
								preSelectCurrency = currencyInfo.id;
								break;
							}
						}
					}
				}

				let currencyInfo = channelInfo.currencyList.find(item => item.id == preSelectCurrency);
				if(currencyInfo == null){
					currencyInfo = channelInfo.currencyList[0];
				}

				this.selectCurrency(channelInfo.id, currencyInfo.id);
			}
		},

		

		selectCurrency(channelId, currencyId){
			if(channelId == this.selectedChannel && currencyId == this.selectedCurrency){
				return;
			}
			this.selectedChannel = channelId;
			this.selectedCurrency = currencyId;

			this.radio = channelId + '_' + currencyId;

			this.addressNetworkList = this.getNetworkList(channelId, currencyId);
		},

		selectNetwork(networkId){
			this.selectedNetwork = networkId;
		},

		clickCurrency(channelId,currencyId){
			this.selectCurrency(channelId, currencyId);

			if(this.pageType === 'changeCurrency'){
				this.finishSelect();
			}else if(this.pageType === 'changeTogether'){
				this.popShow = true;
			}
		},

		getNetworkList(channelId, currencyId){
			let channelInfo = this.channelList.find(item => item.id == channelId);
			if(channelInfo){
				let currencyInfo = channelInfo.currencyList.find(item => item.id == currencyId);
				if(currencyInfo && currencyInfo.networkList && currencyInfo.networkList.length > 0){
					return currencyInfo.networkList;
				}
			}
			return [];
		},

		clickNetworkItem(networkId){
			this.selectNetwork(networkId)
			this.finishSelect();
		},

		finishSelect(){
			let params = {
				channel: this.selectedChannel,
				currency: this.selectedCurrency,
				network: this.selectedNetwork,
				channelList : this.channelList,
			};
			sessionStorage.setItem('topUpSelectResult', JSON.stringify(params));

			if(this.pageType === 'changeTogether'){
				this.$router.replace({
					name:'TopUpDetail',
				})
			}else{
				this.$router.go(-1);
			}
		},

		getCoinIcon(name){
			return BusinessUtils.getCoinIcon(name);
		},
	}
}
</script>

<style>

</style>